<template>
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <van-cell v-for="item in dataList" :key="item.filmId" @click="handleClick(item.filmId)">
      <img :src="item.poster" alt="">
      <h3>{{ item.name }}</h3>
      <p class="actor">主演: {{ item.actors | actorFilter }}</p>
      <p>{{ item.nation }} | {{ item.runtime }} 分钟</p>
    </van-cell>
  </van-list>
</template>

<script>
import { getFilms } from '@/api/film'
export default {
  data() {
    return {
      loading: false,
      finished: false,
      dataList: [],
      total: 0,
      pageNum: 1
    }
  },
  filters: {
    actorFilter(actors) {
      if (!actors) return '暂无主演'
      return actors.map(item => item.name).join(' ')
    }
  },
  mounted() {
  },
  methods: {
    onLoad() {
      this.getFilms()
    },
    async getFilms() {
      if(this.dataList.length && this.dataList.length === this.total){
        this.finished = true
        return
      }
      const { data } = await getFilms(this.pageNum)
      if (data.msg === "ok") {
        const { films, total } = data.data
        this.dataList = this.dataList.concat(films)
        this.total = total
        this.pageNum++
        this.loading = false
      }
    },
    handleClick(filmId){
      this.$router.push(`/film/${filmId}`)
    }
  }
}
</script>

<style lang="less" scoped>
.van-cell {
  padding: 10px;

  img {
    float: left;
    width: 66px;
    margin-right: 10px;
  }

  .actor {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>